<template>
  <div>
    <!-- 占位符 -->
    <router-view></router-view>

    <van-tabbar v-model="active" active-color="#f03d37" inactive-color="#444">
      <van-tabbar-item icon="home-o" to="/home/index">
        <span>电影/影院</span>
        <template #icon>
          <!-- <img v-if="active == 0" src="../assets/tabs/index_1.png" />
          <img v-else src="../assets/tabs/index_0.png" /> -->
          <img :src="require(`../assets/tabs/index_${active == 0 ? 1 : 0}.png`)" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search" to="/home/video">
        <span>视频</span>
        <template #icon>
          <img v-if="active == 1" src="../assets/tabs/video_1.png" />
          <img v-else src="../assets/tabs/video_0.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/home/show">
        <span>演出</span>
        <template #icon>
          <img v-if="active == 2" src="../assets/tabs/show_1.png" />
          <img v-else src="../assets/tabs/show_0.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/home/me">
        <span>我的</span>
        <template #icon>
          <img v-if="active == 3" src="../assets/tabs/me_1.png" />
          <img v-else src="../assets/tabs/me_0.png" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";

let active = ref(0)
</script>

<style scoped>

</style>